<template>
  <div class="root-layout">
    <!-- titleBar -->
    <u-navbar
      height="50"
      title="我的团队"
      @leftClick="onBack"
      :autoBack="true"
    ></u-navbar>
    <!-- content -->
    <div class="content-layout">
      <u-line></u-line>
      <div class="head-layout">
        <img
          src="@/static/icon_my_team.png"
          style="width: 50px; height: 50px"
          alt=""
        />
        <div class="count-layout">
          <view>当前成员:</view>
          <view style="color: #f05f5d; margin-left: 10px">{{
            listData.length
          }}</view>
          <view>人</view>
        </div>
        <button class="invite-button" @click="invite">邀请加入</button>
      </div>
      <u-line></u-line>
      <!-- 列表 -->
      <div class="list-layout">
        <div
          class="list-item-layout"
          v-for="(item, index) in listData"
          :key="index"
        >
          <img
            v-if="!item.imgUrl"
            src="@/static/icon_team_user.png"
            style="width: 26px; height: 26px"
            alt=""
          />
          <img
            v-else
            :src="item.imgUrl"
            style="width: 26px; height: 26px"
            alt=""
          />
          <view class="name-text">{{ item.realName }}</view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mineApi from "@/api/mine";
import jweixin from "weixin-js-sdk";
import passData from "@/api/requstUtil";
import { msg } from "../../common/js/util";
export default {
  data() {
    return {
      back: '',
      listData: [
      ],
    };
  },
  mounted() {
    this.getSubordinateData();
  },
  onLoad() {
    let that = this
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on("acceptMineData", function (data) {
      console.log(data, 3444)
      that.back = data.back
      jweixin.miniProgram.postMessage({
        //wxSdk为微信sdk
        data: {
          userId: data.userId, //自定义
          flag: "1",
        },
      });
    });
  },
  methods: {
    onBack() {
      let url =  `/pages/index/index?value=1`
      if(this.back === 'product') {
        url = `/pages/index/index?value=0`
      }
      uni.navigateTo({
        url,
      });
    },
    // 客经用户下级信息查询
    async getSubordinateData() {
      try {
        const res = await mineApi.postQuerySubordinateData();
        let data = passData(res);
        this.listData = [];
        console.log(data);
        if (data) {
          this.listData = [...data];
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 邀请加入
    invite() {
      msg("邀请");
    },
  },
};
</script>

<style lang="scss" scoped>
.root-layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .content-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    width: 100%;
    margin-top: 50px;
    overflow: hidden;

    .head-layout {
      padding-top: 20px;
      padding-bottom: 5px;
      background: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .count-layout {
        margin-top: 10px;
        align-items: center;
        display: flex;
        flex-direction: row;
      }

      .invite-button {
        margin-top: 10px;
        margin-bottom: 5px;
        width: 60%;
        background: #f05f5d;
        font-size: 14px;
        color: white;
        border-radius: 10px;
        height: 36px;
        border: solid 1px #f05f5d;
      }
    }
    // 列表
    .list-layout {
      flex: 1;
      width: 100%;
      overflow-x: hidden;
      margin-top: 10px;
      overflow-y: auto;

      .list-item-layout {
        margin-left: 10px;
        margin-bottom: 10px;
        width: calc(100% - 40px);
        background: white;
        border: solid rgb(214, 215, 217) 1px;
        border-radius: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        flex-direction: row;
        height: 40px;
      }
    }
  }
  .name-text {
    margin-left: 15px;
  }
}
</style>
